<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .msg1 {
            width: 100px;
            background: #ccc;
            display: none;
        }

        input {
            width: 80px;
        }

        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .calendar {
            width: 210px;
            margin: 0 auto;
            padding: 10px 10px 20px 20px;
            background: #eae9e9;
        }

        .calendar ul {
            width: 210px;
            overflow: hidden;
            padding-bottom: 10px;
        }

        .calendar li {
            float: left;
            width: 58px;
            height: 54px;
            margin: 10px 10px 0 0;
            border: 1px solid #fff;
            background: #424242;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .calendar li h2 {
            font-size: 20px;
            padding-top: 5px;
        }

        .calendar li p {
            font-size: 14px;
        }

        .calendar .active {
            border: 1px solid #424242;
            background: #fff;
            color: #e84a7e;
        }

        .calendar .active p {
            font-weight: bold;
        }

        .calendar .text {
            width: 178px;
            padding: 0 10px 10px;
            border: 1px solid #fff;
            padding-top: 10px;
            background: #f1f1f1;
            color: #555;
        }

        .calendar .text h2 {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .calendar .text p {
            font-size: 12px;
            line-height: 18px;
        }
    </style>
</head>

<body>
    <span class="remember">记住密码</span>
    <div class="msg1">不要在公共区域勾选此项</div>
    <br>
    <!--  -->
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="button" id="btn" value="添加">
    <table border="1" width="400" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <br>
    <!--  -->
    <input type="text" id="password"><span></span>
    <br>
    <!--  -->
    <div id="tab" class="calendar">

        <ul id="box">
            <li>
                <h2>1</h2>
                <p>JAN</p>
            </li>
            <li>
                <h2>2</h2>
                <p>FER</p>
            </li>
            <li>
                <h2>3</h2>
                <p>MAR</p>
            </li>
            <li>
                <h2>4</h2>
                <p>APR</p>
            </li>
            <li>
                <h2>5</h2>
                <p>MAY</p>
            </li>
            <li>
                <h2>6</h2>
                <p>JUN</p>
            </li>
            <li>
                <h2>7</h2>
                <p>JUL</p>
            </li>
            <li>
                <h2>8</h2>
                <p>AUG</p>
            </li>
            <li>
                <h2>9</h2>
                <p>SEP</p>
            </li>
            <li>
                <h2>10</h2>
                <p>OCT</p>
            </li>
            <li>
                <h2>11</h2>
                <p>NOV</p>
            </li>
            <li>
                <h2>12</h2>
                <p>DEC</p>
            </li>
        </ul>

        <div class="text" id="txt">
            <h2>月活动</h2>
            <p></p>
        </div>
    </div>
    <br>
    <!--  -->
    <div class="msg3">点击开始按钮，开始点名，再次点击停止</div>
    <input type="button" id="btn3" value="开始">
</body>
<script>
    // 1. 自动登录勾选提示效果
    var oremember = document.querySelector(".remember")
    var omsg1 = document.querySelector(".msg1")

    // 进入
    oremember.onmouseover = function () {
        // 显示
        omsg1.style.display = "block"
    }
    // 离开
    oremember.onmouseout = function () {
        // 延迟
        setTimeout(function () {
            // 隐藏
            omsg1.style.display = "none"
        }, 300)
    }

    // 2. 用户在页面输入信息，点击添加，添加到页面的表格中
    //     - 用户点击表格中的删除，可以删除对应的信息

    var otxt1 = document.getElementById("txt1");
    var otxt2 = document.getElementById("txt2");
    var otxt3 = document.getElementById("txt3");
    var obtn = document.getElementById("btn");
    var otbody = document.getElementsByTagName("tbody")[0];

    // 绑定事件
    obtn.onclick = function () {
        // 创建元素
        var td1 = document.createElement("td")
        var td2 = document.createElement("td")
        var td3 = document.createElement("td")
        var td4 = document.createElement("td")
        var tr = document.createElement("tr")
        // 设置内容
        td1.innerHTML = otxt1.value;
        td2.innerHTML = otxt2.value;
        td3.innerHTML = otxt3.value;
        td4.innerHTML = "删除";
        // 插入元素
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        otbody.appendChild(tr);
        // 情空输入框
        otxt1.value = otxt2.value = otxt3.value = "";
        // 绑定删除按钮的点击事件
        td4.onclick = function () {
            // 删除整行
            tr.remove();
        }
    }

    // 3. 密码强度 - 差，中，强
    //     - 数字，字母，特殊字符
    //         - 任意1种, 差
    //         - 任意2种, 中
    //         - 三种, 难
    //     - 优化强度提示效果
    var opw = document.getElementById("password");
    var omsg2 = opw.nextElementSibling;
    // 输入事件
    opw.oninput = function () {
        // 获取输入框的内容
        var str = this.value;
        // 用来记录是否出现某种类型
        var a = 0;
        var b = 0;
        var c = 0;
        // 循环遍历所有字符
        for (var i = 0; i < str.length; i++) {
            // 是否出现数字
            if (str[i] >= 0 && str[i] <= 9) {
                // 记录
                a = 1;
            }
            // 是否出现字母
            if ((str[i] >= "a" && str[i] <= "z") || (str[i] >= "A" && str[i] <= "Z")) {
                // 记录
                b = 1;
            }
            // 是否出现特殊
            if (!((str[i] >= 0 && str[i] <= 9) || (str[i] >= "a" && str[i] <= "z") || (str[i] >= "A" && str[i] <= "Z"))) {
                // 记录
                c = 1;
            }
        }
        // 将所有记录累加
        switch (a + b + c) {
            // 根据 和，判断出现几种
            case 1: omsg2.innerHTML = "差"; break;
            case 2: omsg2.innerHTML = "中"; break;
            case 3: omsg2.innerHTML = "强"; break;
        }
    }

    // 4. 简易万年历
    var arr = ['快过年了，大家可以商量着去哪玩吧～',
        '大家好好学习吧222222~~~',
        '大家好好学习吧222222333~~~',
        '大家好好学习吧222444222~~~',
        '大家好好学习555吧222222~~~',
        '大家好好学习吧666222222~~~',
        '大家好好学习吧227772222~~~',
        '大家好好学习吧28888822222~~~',
        '大家好好学习吧99999222222~~~',
        '大家好好学习10000000吧222222~~~',
        '大家好好学习吧111111222222~~~',
        '大家好好学习吧22222200000000000~~~']
    var ali = document.querySelectorAll("#box li")
    var oh2 = document.querySelector("#txt h2")
    var op = document.querySelector("#txt p")
    // 设置默认值
    var index = 0;
    oh2.innerHTML = index + 1 + "月活动";
    op.innerHTML = arr[index];
    ali[index].className = "active"
    // 遍历按钮
    for (var i = 0; i < ali.length; i++) {
        // 保存索引
        ali[i].index = i;
        // 绑定事件
        ali[i].onclick = function () {
            // 清除之前
            ali[index].className = "";
            // 给当前添加
            this.className = "active";
            oh2.innerHTML = this.index + 1 + "月活动";
            op.innerHTML = arr[this.index];
            // 将本次当前设置为下次的之前
            index = this.index;
        }
    }

    // 5. 随机点名
    var omsg3 = document.querySelector(".msg3");
    var obtn3 = document.getElementById("btn3");
    // 名字库
    var arr2 = ["张三", "李四", "王二", "赵五", "钱六", "admin"];
    // 状态
    var i = 0;
    // 计时器的唯一标志
    var t;
    // 事件
    obtn3.onclick = function () {
        // 判断状态执行对应功能
        if (i === 0) {
            // 开始功能
            t = setInterval(function () {
                // 根据随机数随机名字库的索引，将名字设置到指定容器
                omsg3.innerHTML = arr2[random(0, arr2.length - 1)]
            }, 30)
            // 改变状态
            i = 1;
            obtn3.value = "暂停"
        } else {
            // 暂停功能
            clearInterval(t);
            // 改变状态
            i = 0;
            obtn3.value = "下一个"
        }
    }



    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min)
    }
</script>

</html>